<template>
	<view class="historical" :style="'background: url('+ homebgc +') no-repeat center/cover'">
		<view class="historical_box">
			<view class="rical" v-for="( item, index) in box" :key="index">
				<image class="pic" :src="item.user_file_url" style="width: 316rpx;height: 210rpx;" mode="aspectFill"
					@click="ViewDetails(item)">
				</image>
				<view class="des">{{item.sample_description}}</view>
				<view class="txt">
					<view class="right">{{item.dance_action_name}}</view>
					<view class="del" @click="del(item)">
						<text class="tn-icon-delete-fill"></text>
					</view>
				</view>
			</view>
		</view>
		<tn-modal v-model="show" title="警告" :content="content" :radius="40" :button="button" :maskCloseable="false"
			@click="DelModel"></tn-modal>
	</view>
</template>

<script>
	import {
		GetSquareListAPI,
		DellistAPI
	} from "@/api/index.js"
	export default {
		data() {
			return {
				homebgc: this.$websiteUrl + 'static/web_files/Home_bj.svg',
				box: [],
				show: false,
				content: '',
				DelMode: {},
				button: [{
						text: '取消',
						backgroundColor: '#7265E3',
						fontColor: '#FFFFFF'
					},
					{
						text: '确定',
						backgroundColor: '#ebebeb',
						fontColor: '#7265E3'
					}
				]
			}

		},
		onReachBottom() {
			
		},
		onLoad() {
			this.GetSquareList()
		},
		methods: {
			async GetSquareList() {
				const data = {
					page: 1,
					limit: 999,
					call_type: 1
					// query_type:''
				}
				const res = await GetSquareListAPI(data)
				if (res.code == 2000) {
					this.box = res.data
				}
			},
			ViewDetails(obj) {
				const data = {
					dialogue: obj.answer,
					photoPath: obj.user_file_url,
				}
				const objStr = encodeURIComponent(JSON.stringify(data))
				wx.reLaunch({
					url: `/basicPage/Reporting/index?photo=${objStr}`
				})
			},
			async del(obj) {
				this.content = '您确定要删除 ' + obj.dance_action_name + ' 动作分析吗？'
				this.DelMode = obj
				this.show = true
			},
			async DelModel(e) {
				switch (e.index) {
					case 0:
					this.show = false
						break;
					case 1:
						const res = await DellistAPI(this.DelMode.id)
						if (res.code === 2000) {
							wx.showToast({
								title: '删除成功',
								icon: 'success',
							})
							this.show = false
							this.GetSquareList()
						}
						break;

				}
			}
		},
		watch: {

		}
	}
</script>

<style lang="scss" scoped>
	.historical {
		height: 100vh;
		padding: 0 48rpx;
		background-color: #ababab;
		padding-top: 40rpx;

		.historical_box {
			display: flex;
			flex-wrap: wrap;

			.rical {
				width: 316rpx;
				background-color: #fff;
				margin-right: 22rpx;
				margin-bottom: 24rpx;
				box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(112, 136, 210, 0.1);
				border-radius: 28rpx;

				.pic {
					width: 316rpx;
					height: 254rpx;
					border-radius: 28rpx 28rpx 0rpx 28rpx;
					background: #8C80F8;
					border-radius: 28rpx 28rpx 0rpx 28rpx;
				}
				.des{
					display: flex;
					align-items: center;
					margin: 10rpx 0;
					padding: 0 16rpx;
					font-size: 24rpx;
					  overflow: hidden; 		
					  text-overflow: ellipsis;
					  width: 100%;
					  display: -webkit-box;
					  -webkit-box-orient: vertical;
					  -webkit-line-clamp: 1;
					  word-break: break-all;
				}

				.txt {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 15rpx;
					padding: 0 16rpx;
					font-size: 24rpx;
					font-weight: 400;

					.right {
						flex: 8;
						color: #c6c6c6;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						-o-text-overflow: ellipsis;
					}

					.del {
						flex: 1;
						color: red;
					}
				}
			}

			.rical:nth-child(2n) {
				margin-right: 0;
			}
		}
	}
</style>